<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.red_boom{
				width: 50px;
				line-height: 50px;
				border-radius: 50%;
				background: linear-gradient(to right,#ff9569 0%,#e92758 100%);
				text-align: center;
				margin: 5px 5px;
				display: inline-block;
			}
			
			.blue_boom{
				width: 50px;
				line-height: 50px;
				border-radius: 50%;
				background: linear-gradient(-90deg,#29bdd9 0%,#276ace 100%);
				text-align: center;
				margin: 5px 5px;
				display: inline-block;
			}
		</style>
	</head>
	<body id="body">
		<button>摇奖</button>
		<script type="text/javascript">
			var but=document.getElementsByTagName("button")[0];
			but.onclick=function(){
				var num=prompt("您好，请问要买几注?");
				for(var j=0;j<num;j++){
					//首先需要一个数组来接住随机数
				var arr_red=[];
				while(arr_red.length<6){
					var r=parseInt(Math.random()*(33)+1);
					if(arr_red.indexOf(r)==-1){
						arr_red.push(r);
					}
				}
				
				arr_red.sort(function(a,b){
					return a-b;
				})
				//蓝色小球的随机数字
				var arr_blue=parseInt(Math.random()*(16)+1);
				
				var father=document.createElement("div");
				body.appendChild(father);
				father.className="father";
				//渲染红色小球
				for(var i=0;i<arr_red.length;i++){
					var div_red=document.createElement("div");
					div_red.innerHTML=arr_red[i];
					father.appendChild(div_red);
					div_red.className="red_boom";
				}
				
				//渲染蓝色小球
				var div_blue=document.createElement("div");
				div_blue.className="blue_boom";
				div_blue.innerHTML=arr_blue;
				father.appendChild(div_blue);
				}
				
			}
			
			
			
			
		</script>
	</body>
</html>
